$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "../php/goodsinfo.php",
        dataType: "json",
        success: function (response) {
            let table = document.getElementById("goodsListTable").getElementsByTagName("tbody")[0];

            table.innerHTML = `<tr>
            <th>ID</th>
            <th>商品名称</th>
            <th class="buttonTd">
            </th>
            <th class="buttonTd">
            </th>
            </tr>`;
            response.forEach(element => {
                //把表单的每个tr渲染进去
                let url = `/webContent/showpagetest/Mall/MallIndex.html?id=${element.id}`;
                let tr = document.createElement("tr");

                let codetd = document.createElement("td");
                codetd.innerHTML = `${element.id}`;
                tr.appendChild(codetd);

                let nametd = document.createElement("td");
                nametd.innerHTML = `<a href=${url}>${element.name}</a>`;
                tr.appendChild(nametd);
                let buttontd = document.createElement("td");
                buttontd.innerHTML = `<button class="Button">删除</button>`
                tr.appendChild(buttontd);
                let buttont = document.createElement("td");
                buttont.innerHTML = `<button class="Button">编辑</button>`
                tr.appendChild(buttont);
                //添加删除功能
                tr.getElementsByClassName("Button")[0].addEventListener("click", function () {
                    let ID = this.parentNode.parentNode.getElementsByTagName("td")[0].innerText;
                    //从Dom
                    let tr = this.parentNode.parentNode;
                    tr.parentNode.removeChild(tr);
                    //从数据库删除
                    $.ajax({
                        type: "GET",
                        url: "../php/goodDelete.php",
                        data: `ID=${ID}`,
                    });
                });

                //编辑功能
                tr.getElementsByClassName("Button")[1].addEventListener("click", function () {
                    let ID = this.parentNode.parentNode.getElementsByTagName("td")[0].innerText;
                    loadHTML("changeGoods");
                    $.ajax({
                        type: "GET",
                        url: "../php/getGoodsById.php",
                        data: `ID=${ID}`,
                        dataType: "json",
                        async: false,
                        success: function (res) {
                            //先获取这一条信息
                            res = res[0];
                            document.getElementById("name").value = res.name;
                            document.getElementById("originPrice").value = res.originPrice;
                            document.getElementById("nowPrice").value = res.nowPrice;
                            document.getElementById("symbol").value = res.symbol;
                            document.getElementsByClassName("filetext form")[0].value = cutImgName(res.mainImg);
                            if (res.referImg != null) {
                                document.getElementById("fileput2").value = cutImgName(res.referImg);
                            }

                            //把三个表单的数据都解构成原来的对象
                            res.sets = JSON.parse(res.sets);
                            res.cates = JSON.parse(res.cates);
                            res.commits = JSON.parse(res.commits);
                            res.detailImg = JSON.parse(res.detailImg);

                            res.detailImg.forEach(element => {
                                url = cutImgName(element);

                                let table = document.getElementById("referpicTable").getElementsByTagName("tbody")[0];

                                let tr = document.createElement("tr");
                                tr.innerHTML = `
                                  <td>
                                  <span class="inputFaker">
                                          <button class="changeFlieBtn Button">上传图片</button>
                                          <input type="text" class="filetext form" disabled/>
                                          <input type="file" class="truefile">
                                  </span>
                                  </td>
                                  <td>
                                  <button class="Button">删除</button>
                                  </td>
                                  `;
                                tr.getElementsByClassName("filetext")[0].value = cutImgName(element);

                                tr.getElementsByClassName("changeFlieBtn")[0].addEventListener("click", function () {
                                    let trueflie = tr.getElementsByClassName("truefile")[0];
                                    trueflie.click();

                                    trueflie.addEventListener("input", function () {
                                        tr.getElementsByClassName("filetext")[0].value = cutImgName(
                                            trueflie.value
                                        );
                                    });
                                });

                                tr.getElementsByClassName("Button")[1].addEventListener("click", function () {
                                    let tr = this.parentNode.parentNode;
                                    tr.parentNode.removeChild(tr);
                                })

                                table.appendChild(tr);
                            });

                            res.sets.forEach(element => {
                                let tr = document.createElement("tr");
                                tr.innerHTML = `<td>${element.name}</td>
                                        <td>${element.price}</td>
                                        <td class="buttonTd">
                                             <button class="Button">删除</button>
                                        </td>`
                                tr.getElementsByClassName("Button")[0].addEventListener("click", function () {
                                    let tr = this.parentNode.parentNode;
                                    tr.parentNode.removeChild(tr);
                                });
                                document.getElementById("addSetTable").getElementsByTagName("tbody")[0].appendChild(tr);
                            });

                            res.commits.forEach(element => {
                                let tr = document.createElement("tr");
                                tr.innerHTML = `<td>${element}</td>
                                                <td class="buttonTd">
                                                     <button class="Button">删除</button>
                                                </td>`
                                tr.getElementsByClassName("Button")[0].addEventListener("click", function () {
                                    let tr = this.parentNode.parentNode;
                                    tr.parentNode.removeChild(tr);
                                });
                                document.getElementById("addCommitTable").getElementsByTagName("tbody")[0].appendChild(tr);
                            });

                            res.cates.forEach(element => {
                                let table = document.createElement("table");
                                table.className = "tableStyle cateT";
                                table.innerHTML = `
                            <tbody>
                            <tr>
                            <th>类别</th>
                            <th>参数</th>
                            <th class="buttonTd">
                                <button class="Button">删除</button>
                            </th>
                            </tr>
                            </tbody>`;
                                let cate = element.stylename;
                                let style = element.style;
                                style.forEach(element => {
                                    let tr = document.createElement("tr");
                                    tr.innerHTML = `<td>${cate}</td>
                                            <td>${element.attri}</td>
                                            <td><span class="inputFaker">
                                            <button class="changeFlieBtn Button">上传图片</button>
                                            <input type="text" class="filetext form" value="${cutImgName(element.pic)}"  disabled/>
                                            <input type="file" class="truefile">
                                            </span>
                                            </td>`;
                                    tr.getElementsByClassName("changeFlieBtn")[0].addEventListener("click", function () {
                                        let trueflie = tr.getElementsByClassName("truefile")[0];
                                        trueflie.click();

                                        trueflie.addEventListener("input", function () {
                                            tr.getElementsByClassName("filetext")[0].value = cutImgName(trueflie.value);
                                        });
                                    });
                                    table.getElementsByTagName("tbody")[0].appendChild(tr);
                                });
                                table.getElementsByClassName("Button")[0].addEventListener("click", function () {
                                    let table = this.parentNode.parentNode.parentNode.parentNode;
                                    table.parentNode.removeChild(table);
                                })
                                document.getElementById("cateTable").appendChild(table);
                            });

                            //添加提交功能
                            addSetTable("addSet", "addSetTable", "inputSet", "setPrice");
                            addList("addCommit", "addCommitTable", "inputCommit");
                            addMoreDetaiImg();
                            inputStyleChange(0);
                            document
                                .getElementById("referPicButton").addEventListener("click", function () {
                                    let trueflie = document.getElementById("file2");
                                    trueflie.click();

                                    trueflie.addEventListener("input", function () {
                                        document.getElementById("fileput2").value = cutImgName(
                                            trueflie.value
                                        );
                                    });
                                });

                            //渲染类别函数,给类别列表渲染表格,一个类别和多个参数是一张表 有删除功能
                            //意思就是点击添加种类多添加一个div,里面是一个表单,,添加监听,如果点击删除,所有的tr标签都没有的话就直接把整个div删除
                            addCategory();


                            document.getElementById("newAdmit").addEventListener("click", function () {
                                if (checkBlank()) {

                                    //先把所有图片上传
                                    uploadPic(document.getElementById("file1"));
                                    uploadPic(document.getElementById("file2"));

                                    let cate = document.getElementById("cateTable").getElementsByTagName("table");
                                    for (let i = 0; i < cate.length; i++) {
                                        let input = cate[i].getElementsByClassName("truefile");
                                        for (let i = 0; i < input.length; i++) {
                                            uploadPic(input[i]);
                                        }
                                    }
                                    let detal = document.getElementById("referpicTable").getElementsByTagName("tr");
                                    for (let i = 0; i < detal.length; i++) {
                                        let input = detal[i].getElementsByClassName("truefile")[0];
                                        uploadPic(input);
                                    }
                                    
                                    //提交商品详细信息
                                    let newData = getData();
                                    newData.ID = ID;

                                    $.ajax({
                                        type: "GET",
                                        url: "../php/goodsedit.php",
                                        data: newData,
                                        dataType: "json",
                                    });

                                    alert("更新成功！");

                                }
                            });


                        }
                    });
                });

                table.appendChild(tr);
            });
        }
    });
});